<template>
	<view class="reportLayout">
		<scroll-view :style="'top:'+getNavBarHeight()+'px'" class="dateList" :scroll-x="true"
			:scroll-with-animation="true" scroll-into-view="scorll-2" enable-flex>
			<view class="date" id="scorll-0">2021</view>
			<view class="date" id="scorll-1">2022</view>
			<view class="date" id="scorll-2">2023</view>
			<view class="date active" id="scorll-3">2024</view>
			<view class="date" id="scorll-4"></view>
		</scroll-view>

		<view class="content">
			<view class="charts card">
				<view class="title">
					<view>总支出</view>
					<view>¥26,589</view>
				</view>
				<view class="column">
					<qiun-data-charts :tooltipShow="false" type="column" :opts="opts" @getIndex="tapCloumn"
						:chartData="chartData" :ontouch="true" :animation="false" />
				</view>
			</view>
			<view class="overview card">
				<view class="title">
					<view class="left">概况</view>
					<view class="right">1月</view>
				</view>
				<view class="temp">
					<view class="model">
						<view class="describe">本月支出总额</view>
						<view class="amount">¥2536.23</view>
					</view>
					<view class="model">
						<view class="describe">平均支出</view>
						<view class="amount">¥81.81/天</view>
					</view>
				</view>
			</view>
			<view class="type card">
				<view class="title">分类统计</view>
				<view class="list">
					<view class="li">
						<view class="arcbar">
							<image src="@/static/images/type/home.png" mode="scaleToFill"></image>
							<qiun-data-charts type="arcbar" :opts="arcbarOpts" :chartData="arcbarChartData" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getNavBarHeight
	} from '@/utils/system.js'

	import {
		ref
	} from 'vue'


	// 柱状图 ucharts数据
	const chartData = ref({
		categories: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
		series: [{
			name: "支出",
			data: [{
					'color': '#ED70A1',
					'value': 2536.23
				}, 4865.00, 3542.00, 5421.00, 2536.23, 4865.00, 3542.00, 5421.00, 4865.00, 3542.00,
				5421.00, 4865.00
			]
		}]
	})
	// 柱状图 ucharts配置
	const opts = ref({
		dataLabel: false,
		color: ["#F8E7ED"],
		padding: [15, 15, 0, 5],
		touchMoveLimit: 24,
		enableScroll: true,
		// 连续更新的时候滚动条不会变
		update: true,
		legend: {
			show: false
		},
		xAxis: {
			disableGrid: true,
			scrollShow: true,
			itemCount: 5,
			calibration: false,
			fontColor: '#1C1C1C',
			fontSize: '12',
			disableGrid: true
		},
		yAxis: {
			data: [{
				min: 0
			}],
			disableGrid: true
		},
		extra: {
			column: {
				type: "group",
				width: 40,
				activeBgOpacity: 0.00,
			}
		},

	})

	// ucharts选择柱状图事件
	function tapCloumn(e) {
		// #F8E7ED
		// #ED70A1
		const tapIdx = e.currentIndex.index;
		const newSeries = []
		// 循环去生成新的数据
		chartData.value.series[0].data.forEach((value, index) => {
			if (index === tapIdx) {
				newSeries.push({
					'color': '#ED70A1',
					'value': value.value ? value.value : value
				})
			} else if (typeof value === 'object') {
				newSeries.push(value.value)
			} else {
				newSeries.push(value)
			}
		})
		chartData.value.series[0].data = newSeries
	}

	// 进度条通用配置
	const arcbarOpts = ref({
		timing: "easeOut",
		duration: 1000,
		rotate: false,
		rotateLock: false,
		padding: undefined,
		fontSize: 13,
		fontColor: "#666666",
		dataLabel: true,
		dataPointShape: true,
		dataPointShapeType: "solid",
		touchMoveLimit: 60,
		enableScroll: false,
		enableMarkLine: false,
		title: {
			name: "居 家",
			fontSize: 11,
			color: "#8A8A8A",
			offsetX: 0,
			offsetY: 13
		},
		subtitle: {
			name: "44%",
			fontSize: 12,
			color: "#000",
			offsetX: 0,
			offsetY: 13
		},
		extra: {
			arcbar: {
				type: "circle",
				width: 5,
				backgroundColor: "#E4EFFD",
				startAngle: 0,
				endAngle: 0.25,
				gap: 2,
				direction: "cw",
				lineCap: "round",
				centerX: 0,
				centerY: 0,
				linearType: "custom",
				customColor: ['#82C3FB','#626BE6']
			}
		}
	})
	// 进度条修改渐变颜色
	const arcbarChartData = ref({
		series: [{
			data: 0.44
		}]
	})
</script>

<style lang="scss" scoped>
	.reportLayout {
		background: #f9f9ff;
		min-height: 100vh;

		.dateList {
			position: fixed;
			left: 0;
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			background: #fff;
			z-index: 2;

			.date {
				display: inline-block;
				width: 33.33%;
				text-align: center;
				line-height: 60rpx;
				font-size: 24rpx;
				color: #606060;
				text-align: center;
			}

			.active {
				color: black;
				font-size: 28rpx;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					transform: translateX(-50%);
					bottom: 0;
					left: 50%;
					width: 100rpx;
					height: 4rpx;
					background: #31D19E;
				}
			}

		}

		.content {
			padding: 80rpx 32rpx;

			.card {
				background-color: white;
				border-radius: 5px;
				box-shadow: 0px 4px 16px #EFF5FF;
				margin-bottom: 32rpx;
			}

			.charts {
				height: 464rpx;
				padding: 16rpx;

				.title {
					height: 100rpx;
					text-align: center;
					padding-top: 16rpx;

					& view:first-child {
						font-size: 22rpx;
						letter-spacing: 3rpx;
						line-height: 20rpx;
						color: rgba(138, 138, 138, 1);
					}

					& view:last-child {
						margin-top: 16rpx;
						font-size: 44rpx;
						font-weight: 600;
						line-height: 48rpx;
						color: rgba(28, 28, 28, 1);
					}
				}

				.column {
					height: 330rpx;

				}
			}

			.overview {
				height: 240rpx;
				padding: 26rpx 32rpx;

				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					color: #8A8A8A;
					letter-spacing: 5rpx;
					margin-bottom: 32rpx;
				}

				.temp {
					display: flex;
					justify-content: space-between;

					.model {
						width: 300rpx;
						height: 116rpx;
						text-align: center;
						border-radius: 5px;
						padding: 24rpx 0;
						color: white;

						&:first-child {
							background: linear-gradient(224.85deg, #FFD387 0%, #FFA26B 100%);
							box-shadow: 0px 4px 16px -4px #FFD380;
						}

						&:last-child {
							background: linear-gradient(220.96deg, #FFB1B1 0%, #EB6A9F 100%);
							box-shadow: 0px 4px 16px -4px #FAA7B3;
						}

						.describe {
							letter-spacing: 2rpx;
							font-size: 22rpx;
							line-height: 22rpx;
						}

						.amount {
							margin-top: 5rpx;
							font-size: 32rpx;
							line-height: 36rpx;
						}
					}

				}
			}

			.type {
				padding: 32rpx;

				.title {
					color: #8A8A8A;
					font-size: 28rpx;
					letter-spacing: 3rpx;
				}

				.list {
					margin-top: 48rpx;
					display: flex;

					.li {
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: center;

						.arcbar {
							width: 180rpx;
							height: 180rpx;
							position: relative;
							
							image {
								width: 44rpx;
								height: 44rpx;
								position: absolute;
								top: 40rpx;
								left: 50%;
								transform: translateX(-50%);
							}
						}
					}
				}
			}
		}
	}
</style>